import React, { Component } from 'react'

import './Child.css'

// 导入事件中心
import event from '../utils/eventBus'

export default class Child extends Component {

  // 子组件内部数据
  state = {
    childData: "子组件Data数据"
  }

  // 事件函数
  sendChildData() {
    // 调用父组件传递的函数
    this.props.sendData(this.state.childData)
  }

  // 事件函数：发送消息给其他组件
  sendChildOther() {
    // 触发自定义事件dfc-event，事件中传递了数据
    event.emit("dfc-event", this.state.childData)
  }

  render() {
    // 子组件中可以通过this.props接受属性数据
    console.log(this.props, "Child props")
    // 子组件中可以解构获取父组件传递的数据
    let { fromParent } = this.props

    return (
      <div className="child-container">
        子组件
        <p>内部数据：{this.state.childData}
          <button onClick={this.sendChildData.bind(this)}>发送数据给父组件</button>
        </p>
        <p>来自父组件的数据：{fromParent}</p>
        <hr />
        <button onClick={this.sendChildOther.bind(this)}>发送数据给其他组件</button>
      </div>
    )
  }
}
